<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta content="telephone=no" name="format-detection" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="renderer" content="webkit" />
	<!--360自动切换极速-->
	<meta name="apple-mobile-web-app-title" content="DAN潜水" />
	<meta name="format-detection" content="telephone=no" />
	<link rel="shortcut icon" href="${ctxPath}/image/favicon.ico"/>
	<!--阻止iphone识别为电话-->
	<link rel="stylesheet" type="text/css" href="${ctxPath}/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="${ctxPath}/css/swiper.min.css" />
	<link rel="stylesheet" type="text/css" href="${ctxPath}/css/global.css" />
	<link rel="stylesheet" type="text/css" href="${ctxPath}/css/index.css" />
	<style>
		.modal-xieyi .modal-body{
			height: 500px;
			overflow-y: scroll;
			font-size: 14px;
		}
		.ac-info .content img,.ac-info .content img video{
			max-width: 100%;
		}
		.ac-info .content{
			margin-top: 15px;
		}
		.ac-info .rich-text{
			padding: 15px 0;
		}
		#signIn .form{
			width: 410px;
			margin-top: 0px;
			margin-bottom: 30px;
		}
		#signIn .form .col-3{
			flex: 0 0 18%;
			max-width: 18%;
		}
		#signIn .form .col-9{
			flex: 0 0 82%;
			max-width: 82%;
		}
		#signIn .xieyi input{
			position: relative;
			top: 2px;
		}
		#signIn .modal-header{
			text-align: left;
			justify-content: start;
			padding-left: 45px;
		}
		#signIn .xieyi{
			margin-top: 45px;
			padding-left: 2px;
		}
	</style>
	<title>DAN潜水</title>
</head>

<body>
	<div class="container">
		@include("/include/header.html"){}
		<div class="page-nav">
			<a href="${ctxPath}/activity/list">活动大厅 »</a>
			<span class="bold">详情</span>
		</div>
		<div class="ac-info">
			<div class="top">
				<img src="${activity.logoUrl!(ctxPath+'/image/blank/def_pic.png')}" alt="" class="cover">
				<div class="right">
					<h3 class="title dot-line-2">
						<span>${activity.name!}</span>
						<span class="vip">${activity.permissionDictLabel!}</span>
					</h3>
					<div class="date">${strutil.formatDate(activity.createTime!, 'yyyy-MM-dd HH:mm:ss')}</div>
					<div class="status">${activity.city.name!}丨${activity.pvNum!0}次浏览</div>
					<p class="des dot-line-5">
						${activity.introduction!}
				</p>
					@if(activity.status == 0){
					<button class="btn btn-danger" onclick="toSignUp()">报名</button>
					@}else{
					<button class="btn" onclick="alertSignUp('${activity.status}')">报名</button>
					@}
				</div>
				@if(activity.status == 2){
				<object data="${ctxPath}/image/ic_exceed.svg" type="image/svg+xml" class="status-pic"></object>
				@}
			</div>
			<div class="content">
				<div class="title">详情介绍</div>
				<div class="rich-text richtext-style">
					${activity.info!}
				</div>
			</div>
		</div>
		@include("/include/footer.html"){}
	</div>
	<!-- Modal/signIn-->
	<div class="modal fade dan-modal" id="signIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">报名信息</h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
				</div>
				<div class="modal-body">
					<form id="signForm" action="" class="form">
						<input name="activityId" value="${activity.id!}" type="hidden"/>
						<div class="form-group row">
							<label class="col-3 control-label required">姓名：</label>
							<div class="col-9">
								<input id="nameInput" type="text" class="form-control" placeholder="请输入姓名" name="name" value="${member.username!}">
							</div>
						</div>
						<div class="form-group row">
							<label class="col-3 control-label">昵称：</label>
							<div class="col-9">
								<input id="nicknameInput" type="text" class="form-control" placeholder="请输入昵称" name="nickname" value="${member.nickname!}">
							</div>
						</div>
						<div class="form-group row">
							<label class="col-3 control-label required">手机：</label>
							<div class="col-9">
								<input id="phoneInput" type="text" class="form-control" placeholder="请输入手机" name="phone" value="${member.mobile1!}">
							</div>
						</div>
						<div class="form-group row">
							<label class="col-3 control-label required">邮箱：</label>
							<div class="col-9">
								<input id="emailInput" type="text" class="form-control" placeholder="请输入邮箱" name="email" value="${member.email!}">
							</div>
						</div>
						<div class="xieyi">
							<input id="agreeCheckbox" type="checkbox" name="agree" value="1">
							我已阅读并同意<span class="dan-red" data-toggle="modal" data-target="#agreement" style="cursor:pointer">《DAN潜水平台用户协议》</span>
						</div>
						<button type="button" class="btn btn-danger dan-btn-full" onclick="doSubSignUp()">报名加入</button>
					</form>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal/协议-->
	<div class="modal fade dan-modal modal-xieyi" id="agreement" tabindex="1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">《DAN潜水平台用户协议》</h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
				</div>
				<div class="modal-body">
					${article.content!"暂无协议内容"}
				</div>
			</div>
		</div>
	</div>

	<script src="${ctxPath}/js/swiper.min.js"></script>
	<script type="text/javascript">
		var loginFlag = ${has(member) ? true : false};
		toSignUp = function(){
			if(loginFlag){
				$('#signIn').modal('show');
			}else{
				alert("您还未登录，请先登录再报名！");
				return false;
			}
		}

		alertSignUp = function(status){
			if(status == '2'){
				alert("活动已结束，请参加其他活动或等待下次活动！");
			}else{
				alert("活动已经开始，无法报名！");
			}
		}

		doSubSignUp = function(){
			var name = $("#nameInput").val();
			var nickname = $("#nicknameInput").val();
			var phone = $("#phoneInput").val();
			var email = $("#emailInput").val();
			var agree = $('input:checkbox:checked').val();
			if(name == ''){
				alert("请输入姓名");
				return false;
			}
			if(phone == ''){
				alert("请输入手机号码");
				return false;
			}
			if(!checkPhone(phone)){
				alert("请输入正确的手机号码");
				return false;
			}
			if(email == ''){
				alert("请输入邮箱");
				return false;
			}
			if(!checkEmail(email)){
				alert("请输入正确的邮箱");
				return false;
			}
			if(agree!=1){
				alert("您需要同意《DAN潜水平台用户协议》才可以报名哦");
				return false;
			}
			$.ajax({
				type: "post",
				dataType: "json",
				url: '${ctxPath}/activity/signUp',
				data: $('#signForm').serialize(),
				success: function(result){
					if(result.code == 500){
						alert("网络异常，请稍后再试！");
					}else if(result.code != 200){
						alert(result.msg);
					}else{
						alert("报名成功");
						window.location.reload();
					}
				},
				error: function(){
					alert("网络异常，请稍后再试！");
				}
			});
		}

		checkEmail = function(email){
			var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
			return reg.test(email);
		}
		checkPhone = function(phone){
			return /^1[3456789]\d{9}$/.test(phone);
		}
	</script>
</body>

</html>